{% extends 'base.html' %}

{% load static %}

{% block title %}
    全部订单
{% endblock %}

{% block content %}
    <h3>全部订单</h3>
    <div class="row">
        <div class="col-2">
            <div class="list-group" id="list-tab" role="tablist">
                <a class="nav-link list-group-item list-group-item-action" id="list-home-list"
                   href="{% url 'shop:detail' %}"  aria-controls="home">个人信息</a>
                <a class="nav-link list-group-item list-group-item-action  active" id="list-profile-list"
                   href="{% url 'shop:order' %}" role="tab" aria-controls="profile">全部订单</a>
                <a class="nav-link list-group-item list-group-item-action" id="list-messages-list"
                   href="{% url 'shop:receive_address' %}" role="tab" aria-controls="messages">收货地址</a>
            </div>
        </div>
        <div class="col-6">
            <div class=" tab-content" id="nav-tabContent">
                <div class=" tab-pane fade" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
                    <h5 class="center card-title ">基本信息</h5>
                </div>
                <div class="tab-pane fade show active" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...
                <h5 class="center card-title ">全部订单</h5>
                </div>
                <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block myjs %}
    <script type="text/javascript">
    $(document).ready(function()
		{
			$("#iconfile").change(function()
			{
                    var formData = new FormData();
                    formData.append('uid', {{ user.id }});
                    formData.append('icon', $("#iconfile")[0].files[0]);
                    csrf = $('input[name="csrfmiddlewaretoken"]').val();
                    formData.append('csrfmiddlewaretoken', csrf);
					$.ajax({
                        url: /upload_icon/,
                        type:'post',
                        data: formData,
                        cache: false,
                        processData: false,
                        contentType: false,
                        success:function displayimg()
					{
					 input=document.getElementById('iconfile')
					 //获取第一个文件对象 （如果有多张时可使用循环files数组改变多个<img>的 src值）
					 var file = input.files[0];
					 //判断当前是否支持使用FileReader
					 if(window.FileReader)
					 {
								  //创建读取文件的对象
								  var fr = new FileReader();
								  //以读取文件字符串的方式读取文件 但是不能直接读取file
								  //因为文件的内容是存在file对象下面的files数组中的
								  //该方法结束后图片会以data:URL格式的字符串（base64编码）存储在fr对象的result中
								  fr.readAsDataURL(file);
								  fr.onloadend = function()
								  {
									document.getElementById('icon').src = fr.result;
								  }
					 }
					}})
			}
			)
		}
		 )
    </script>
{% endblock %}